<template>
  <div id="home">
    <!-- <div class="current">
      <div class="title">{{ currentTime }}</div>
      <div>
        <el-row :gutter="5">
          <el-col
            v-for="(item, index) in epidemicData.currentData"
            :key="index"
            :span="8"
          >
            <div class="currentBg">
              <div class="colorDiv">{{ item.num }}</div>
              <div>{{ item.name }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div> -->
    <div class="history">
      <div class="title">截止日期:{{ currentTime }}24时</div>
      <div>
        <el-row :gutter="5">
          <el-col
            v-for="(item, index) in epidemicData.historyData"
            :key="index"
            :span="8"
          >
            <div class="currentBg historyBg">
              <div class="colorDiv">
                <strong>{{ item.num }}</strong>
              </div>
              <div>{{ item.name }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="img"></div>
    <div id="sum">
      <div class="tableDiv">
        <div class="title">国内病例</div>
        <el-table
          height="500"
          class="biaoge"
          :header-cell-style="cellClass"
          :data="tableData"
          style="width: 100%"
          :row-class-name="tableRowClassName"
        >
          <el-table-column
            align="center"
            prop="province"
            label="地区"
            width="180"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="confirmed"
            label="新增确诊"
            width="180"
          >
          </el-table-column>
          <el-table-column align="center" prop="suspected" label="新增疑似">
          </el-table-column>
          <el-table-column align="center" prop="dead" label="新增死亡">
          </el-table-column>
          <el-table-column align="center" prop="cure" label="新增治愈">
          </el-table-column>
          <el-table-column align="center" prop="outside" label="境外输入">
          </el-table-column>
          <el-table-column align="center" prop="severe" label="新增重症">
          </el-table-column>
        </el-table>
      </div>
      <div id="midimg"></div>
      <div id="artDiv"></div>
    </div>
    <div class="articleDiv">
      <div class="title">最新进展</div>
      <div class="content">
        <div class="contentList">
          <div
            @click="
              currentArticle = item;
              dialogVisible = true;
            "
            v-for="(item, index) in listData"
            :key="item.id"
          >
            <div class="listHeader">
              <div class="circle"></div>
              <el-tag v-if="index == 0" size="mini" type="danger" effect="dark"
                >最新</el-tag
              >
              <span>{{
                moment(item.publishTime).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </div>
            <div class="listContent">{{ item.title }}</div>
          </div>
        </div>
        <!-- 分页 -->
        <div class="contentPage">
          <el-pagination
            @current-change="currentChange"
            layout="prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      :title="currentArticle.title"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <div>
        {{ moment(currentArticle.publishTime).format("YYYY-MM-DD HH:mm:ss") }}
      </div>
      <!-- v-html可以将代码片段字符串设置到内部内容区 -->
      <span class="imgWidth" v-html="currentArticle.content"></span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false"
          >关闭</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
let echarts = require("echarts");
import axios from "../utils/request";
let moment = require("moment");
export default {
  data() {
    return {
      dialogVisible: false,
      currentArticle: {},
      //最新进展数据
      listData: [],
      //进展数据总数
      total: 0,
      //分页参数
      pageParam: {
        page: 1,
        pageSize: 10,
        categoryId: 3,
      },

      //国内病例数据
      tableData: [],
      //当天时间 new Date()
      currentTime: this.moment(new Date()).format("M月D日"),
      //当天疫情数据和历史疫情数据
      epidemicData: {
        currentData: [
          {
            name: "新增确诊",
            num: this.getRandom(5, 10),
          },
          {
            name: "本土新增",
            num: this.getRandom(0, 3),
          },
          {
            name: "境外输入",
            num: this.getRandom(0, 10),
          },
        ],

        historyData: [
          {
            name: "现有确诊",
            num: this.getRandom(10, 100),
          },
          {
            name: "现有重症",
            num: this.getRandom(10, 20),
          },
          {
            name: "累积境外输入",
            num: this.getRandom(500, 2000),
          },
          {
            name: "累计确诊",
            num: this.getRandom(80000, 100000),
          },
          {
            name: "累积出院",
            num: this.getRandom(70000, 80000),
          },
          {
            name: "累积死亡",
            num: this.getRandom(500, 1000),
          },
        ],
      },
    };
  },
  computed: {},
  methods: {
    getOption() {
      return {
        color: ["#7ab4ee", "#434348"],

        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["新增确诊", "新增疑似"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: true,
          },
        },
        series: [
          {
            name: "新增确诊",
            type: "line",

            data: [320, 332, 301, 334, 390, 330, 320, 180, 289, 360, 350, 340],
          },
          {
            name: "新增疑似",
            type: "line",

            data: [820, 932, 901, 934, 1000, 980, 970, 940, 960, 888, 920, 899],
          },
        ],
      };
    },
    toDraw() {
      let chart = echarts.init(document.getElementById("artDiv"));
      let option = this.getOption();
      chart.setOption(option);
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    },
    moment,
    //当前页发生变化
    currentChange(val) {
      this.pageParam.page = val;
      this.findArticle();
    },
    //分页获取最新进展的资讯信息
    async findArticle() {
      let res = await axios.get("/article/pageQuery", {
        params: this.pageParam,
      });
      this.listData = res.data.list;
      this.total = res.data.total;
    },
    //表格表头列背景
    cellClass({ columnIndex }) {
      //columIndex是列索引，从0开始
      // console.log(columnIndex);
      let color = "#e0e0fe";
      if (columnIndex == 1) color = "#dd837f";
      if (columnIndex == 2) color = "#f4d3aa";
      if (columnIndex == 3) color = "#fdcccb";
      if (columnIndex == 4) color = "#c5eab4";
      if (columnIndex == 5) color = "#d2d2d2";
      if (columnIndex == 6) color = "teal";
      return {
        backgroundColor: color,
        color: "#000",
        height: "60px",
      };
    },
    getRandom(num1, num2) {
      //5 10
      return Math.round(Math.random() * (num2 - num1) + num1);
    },
    getRandom1(num1, num2) {
      //5 10
      return Math.round(Math.random() * (num2 - num1) + num1);
    },
  },
  async created() {
    this.findArticle();
    let res = await axios.get("/epidemic/pageQuery", {
      params: { page: 1, pageSize: 20 },
    });
    this.tableData = res.data.list;
  },
  mounted() {
    this.toDraw();
  },
};
</script>

<style scoped>
.currentBg {
  background-color: #eefaff;
  height: 110px;
  border-radius: 5px;
  /* 上下 左右 */
  padding: 20px 0;
  box-sizing: border-box;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  margin-bottom: 10px;
}

.historyBg {
  background-color: #f8fdfd;
}
/* .history {
  height: 106px;
} */
.colorDiv {
  color: rgb(247, 76, 49);
  font-weight: bold;
}
.title {
  color: #999;
  margin-bottom: 5px;
}
.contentList {
  background-color: #f8f8f8;
  padding: 20px;
  margin-bottom: 10px;
}
.listHeader > * {
  margin-right: 3px;
}
.listHeader > span:last-child {
  position: relative;
  top: 1px;
  font-size: 14px;
}
.circle {
  width: 10px;
  height: 10px;
  background-color: #0056ff;
  display: inline-block;
  border-radius: 50%;
}
.listContent {
  padding: 16px;
  border-radius: 5px;
  color: #666;
  background-color: #fff;
  margin-top: 5px;
  font-size: 14px;
  margin-bottom: 10px;
}
/* 设置v-html字符串图片样式 */
>>> .imgWidth img {
  width: 100%;
}
.img {
  width: 100%;
  height: 326px;
  background: url("image/hero.png") no-repeat;
  background-size: 100% 100%;
}
.yestday {
  font-size: 10px;
}
.tableDiv {
  width: 30%;
  display: inline-block;
}
#artDiv {
  width: 30%;
  size: 100% 100%;

  height: 482px;
  margin-top: 0;
  /* margin-left: 0; */
  float: right;
  margin-right: 80px;
}

#midimg {
  display: inline-block;
  /* background: url("image/bg.jpg") no-repeat; */

  height: 500px;
  width: 30%;
  margin-left: 30px;
  background: url("image/bg.jpg") no-repeat;
  background-size: 100% 100%;
}
#sum {
  width: 100%;
  margin: 0 auto;
}
</style>